<template>
  <div class="all">
     <!-- 新增和编辑 -->
    <div class="edit_add_bg" v-show="edit_add_bg">
      <div  v-show="show_edit_add">
        <div class="select_line">
          <span class="select_name">子项目:</span>
          <Select v-model="subproject" clearable style="width:15%">
            <Option v-for="item in subproject_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <span class="select_name">问题分类:</span>
          <Select v-model="classification" clearable style="width:15%">
            <Option v-for="item in issue_classification_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <span class="select_name">问题名称:</span>
          <Input v-model="issue_name" placeholder="请输入" clearable style="width:15%"></Input>

          <span class="select_name">问题描述:</span>
          <Input v-model="issue_description" placeholder="请输入" clearable style="width:15%"></Input>

        </div>
        <div class="select_line">
          <span class="select_name">提出人:</span>
          <Input v-model="asking_person" placeholder="请输入" clearable style="width:15%"></Input>

          <span class="select_name">提出单位:</span>
          <Input v-model="asking_party" placeholder="请输入" clearable style="width:15%"></Input>

          <span class="select_name">责任方:</span>
          <Input v-model="responsible_party" placeholder="请输入" clearable style="width:15%"></Input>

          <span class="select_name">优先级:</span>
          <Select v-model="priority" clearable style="width:15%">
            <Option v-for="item in priority_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </div>
        <div class="select_line">

          <span class="select_name">风险等级:</span>
          <Select v-model="risk_grade" clearable style="width:15%">
            <Option v-for="item in risk_grade_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <span class="select_name">提出开始时间:</span>
          <DatePicker ref="starttime" @on-change="getstarttime" class="select_data" type="date" :placeholder="starttime" style="width: 15%"></DatePicker>

          <span class="select_name">实际完成时间:</span>
          <DatePicker ref="endtime"  @on-change="getendtime" class="select_data" type="date" :placeholder="endtime" style="width: 15%"></DatePicker>

          <span class="select_name">甲方负责人:</span>
          <Input v-model="responsible_person_a" placeholder="请输入" clearable style="width:15%"></Input>

        </div>
        <div class="select_line">
          <span class="select_name">乙方负责人:</span>
          <Input v-model="responsible_person_b" placeholder="请输入" clearable style="width:15%"></Input>

          <span class="select_name">状态:</span>
          <Select v-model="state" clearable style="width:15%">
            <Option v-for="item in state_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>          

          <span class="select_name">自定义项1:</span>
          <Input v-model="user_defined_item1" placeholder="请输入" clearable style="width:15%"></Input>

          <span class="select_name">自定义项2:</span>
          <Input v-model="user_defined_item2" placeholder="请输入" clearable style="width:15%"></Input>

        </div>
        <div class="select_line">
          <span class="select_name">自定义项3:</span>
          <Input v-model="user_defined_item3" placeholder="请输入" clearable style="width:15%"></Input>

          <span class="select_name">自定义项4:</span>
          <Input v-model="user_defined_item4" placeholder="请输入" clearable style="width:15%"></Input>
          
          <span class="select_name">自定义项5:</span>
          <Input v-model="user_defined_item5" placeholder="请输入" clearable style="width:15%"></Input>
      </div>
      <div class="select_line">
        <Button type="success"class="edit_add_btn1" @click="edit_add_submit">提交</Button>
        <Button   class="edit_add_btn2" @click="edit_add_cancel">取消</Button>
      </div>
    </div>

    </div>
    <div class="bgdiv" v-show="showbg">
      <!-- 导入的提示 -->
      <p class="msg_title">
        <span>{{allNum}}</span><span>{{successNum}}</span><span>{{errNum}}</span><i class="_hide" @click="_hide">X</i>
      </p>
      <div class="msgdiv" v-show="showImportMsg">
        <div v-for ="item in msginfoall">
          <div class="list_info">{{item}}</div>
        </div>
      </div>
    </div>
    <Card>
      <div class="select_line">
         <span class="select_name">子项目:</span>
        <Select v-model="subproject" clearable style="width:15%">
          <Option v-for="item in subproject_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <span class="select_name">问题分类:</span>
        <Select v-model="classification" clearable style="width:15%">
          <Option v-for="item in issue_classification_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <span class="select_name">问题名称:</span>
        <Input v-model="issue_name" placeholder="请输入" clearable style="width:15%"></Input>

        <span class="select_name">提出人:</span>
        <Input v-model="asking_person" placeholder="请输入" clearable style="width:15%"></Input>

      </div>
      <div class="select_line">
        <span class="select_name">提出单位:</span>
        <Input v-model="asking_party" placeholder="请输入" clearable style="width:15%"></Input>

        <span class="select_name">责任方:</span>
        <Input v-model="responsible_party" placeholder="请输入" clearable style="width:15%"></Input>

        <span class="select_name">优先级:</span>
        <Select v-model="priority" clearable style="width:15%">
          <Option v-for="item in priority_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <span class="select_name">风险等级:</span>
        <Select v-model="risk_grade" clearable style="width:15%">
          <Option v-for="item in risk_grade_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

      </div>
      <div class="select_line">
        <span class="select_name">提出开始时间:</span>
        <DatePicker @on-change="getstarttime" class="select_data" type="date" placeholder="请选择日期" style="width: 15%"></DatePicker>

        <span class="select_name">实际完成时间:</span>
        <DatePicker  @on-change="getendtime" class="select_data" type="date" placeholder="请选择日期" style="width: 15%"></DatePicker>

        <span class="select_name">甲方负责人:</span>
        <Input v-model="responsible_person_a" placeholder="请输入" clearable style="width:15%"></Input>

        <span class="select_name">乙方负责人:</span>
        <Input v-model="responsible_person_b" placeholder="请输入" clearable style="width:15%"></Input>

      </div>

      <div class="select_line">
        <span class="select_name">状态:</span>
        <Select v-model="state" clearable style="width:15%">
          <Option v-for="item in state_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="select_line">
        <Button type="success" class="execl_btn" @click="add_task">新增</Button>
        <Button type="warning" class="execl_btn" @click="search">搜索</Button>
        <Button type="error" class="execl_btn" @click="expiretask">已到期问题</Button>
        <Button class="execl_btn" type="primary"><a class="exportE" :href="exurlissue">导出Excel文件</a></Button>
         <Upload class="execl_btn"
                :format ="['xlsx']"
                :on-success="handleSuccess"
                :on-format-error="handleFormatError"
                :on-error="handleError"
                :show-upload-list='false'
                :action="issueurl">
            <Button type="primary" >导入Excel文件</Button>
        </Upload>
      </div>
      <div>
        <tables ref="tables" border :columns="col" v-model="datat"/>
      </div>
      <!-- 为了占行 -->
      <Button style="margin: 10px 0;visibility: hidden;"></Button>
      <div class="page">
        <Page :total="totalPageNum" :current="pageindex" :page-size="pagesize" show-elevator show-sizer show-total
        placement="top" @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>
      </div>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { mapActions } from 'vuex'
import DEV_URL from '../../../config/url'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      exurlissue: '',
      issueurl: '',
      edit_add_bg:false,
      show_edit_add:false,
      showbg:false,
      showImportMsg: false,
      msginfoall: [],
      successNum: '',
      allNum: '',
      errNum: '',
      id:'',
      subproject: '',
      classification: '',
      issue_name: '',
      issue_description:'',
      asking_person: '',
      asking_party: '',
      responsible_party: '',
      priority: '',
      risk_grade: '',
      starttime: '',
      endtime: '',
      responsible_person_a: '',
      responsible_person_b: '',
      state: '',
      user_defined_item1:'',
      user_defined_item2:'',
      user_defined_item3:'',
      user_defined_item4:'',
      user_defined_item5:'',
      subproject_list: [],
      issue_classification_list: [],
      priority_list: [],
      risk_grade_list: [],
      state_list: [],
      file: '',
      totalPageNum: 0,
      pageindex: 1,
      pagesize: 5,
      col:[],
      issuetitle:[
        '问题编号',
        '子项目',
        '问题分类',
        '问题名称',
        '问题描述',
        '提出人',
        '提出单位',
        '责任方',
        '优先级',
        '风险等级',
        '提出开始时间',
        '提出完成时间',
        '甲方负责人',
        '乙方负责人',
        '状态',
        '自定义项1',
        '自定义项2',
        '自定义项3',
        '自定义项4',
        '自定义项5',
      ],
      datat: []
    }
  },
  created () {
    this.exurlissue = DEV_URL + '/export/downloadExcel/issue'
    this.issueurl = DEV_URL + '/import/excel?tableName=issue'
    this.col= [
      {
        align: 'center',
        title: this.issuetitle[0],
        key: 'id',
        fixed: 'left',
        width: 100
      },
      {
        title:this.issuetitle[1],
        align: 'center',
        key: 'subproject',
        width: 100
      },
      {
        title: this.issuetitle[2],
        align: 'center',
        key: 'classification',
        width: 100
      },
      {
        title: this.issuetitle[3],
        align: 'center',
        key: 'issue_name',
        width: 100
      },
      {
        title: this.issuetitle[4],
        align: 'center',
        key: 'issue_description',
        width: 100
      },
      {
        title: this.issuetitle[5],
        align: 'center',
        key: 'asking_person',
        width: 100
      },
      {
        title: this.issuetitle[6],
        align: 'center',
        key: 'asking_party',
        width: 100
      },
      {
        title:this.issuetitle[7],
        align: 'center',
        width: 100,
        key: 'responsible_party'
      },
      {
        title:  this.issuetitle[8],
        align: 'center',
        width: 100,
        key: 'priority'
      },
      {
        title: this.issuetitle[9],
        align: 'center',
        width: 120,
        key: 'risk_grade'
      },
      {
        title: this.issuetitle[10],
        align: 'center',
        width: 120,
        key: 'starttime'
      },
      {
        title: this.issuetitle[11],
        align: 'center',
        width: 120,
        key: 'endtime'
      },
      {
        title:this.issuetitle[12],
        align: 'center',
        width: 120,
        key: 'responsible_person_a'
      },
      {
        title: this.issuetitle[13],
        align: 'center',
        width: 120,
        key: 'responsible_person_b'
      },
      {
        title: this.issuetitle[14],
        align: 'center',
        width: 100,
        key: 'state'
      },
      {
        title: this.issuetitle[15],
        align: 'center',
        width: 100,
        key: 'user_defined_item1'
      },
      {
        title: this.issuetitle[16],
        align: 'center',
        width: 100,
        key: 'user_defined_item2'
      },
      {
        title: this.issuetitle[17],
        align: 'center',
        width: 100,
        key: 'user_defined_item3'
      },
      {
        title: this.issuetitle[18],
        align: 'center',
        width: 100,
        key: 'user_defined_item4'
      },
      {
        title: this.issuetitle[19],
        align: 'center',
        width: 100,
        key: 'user_defined_item5'
      },
      {
      title:'编辑',
      align: 'center',
      width: 100,
      fixed: 'right',
      render:(h,params) =>{
        var self = this;
          return h('Button', {
            on: {
              click:(value) => {
                debugger
                var _thisrow = params.row
                this.id=_thisrow.id,
                this.subproject=_thisrow.subproject,
                this.classification=_thisrow.classification,
                this.issue_name=_thisrow.issue_name,
                this.issue_description=_thisrow.issue_description,
                this.asking_person=_thisrow.asking_person,
                this.asking_party=_thisrow.asking_party,
                this.responsible_party=_thisrow.responsible_party,
                this.priority=_thisrow.priority,
                this.risk_grade=_thisrow.risk_grade,
                this.starttime=_thisrow.starttime,
                this.endtime=_thisrow.endtime,
                this.responsible_person_a=_thisrow.responsible_person_a,
                this.responsible_person_b=_thisrow.responsible_person_b, 
                this.state=_thisrow.state,
                this.user_defined_item1=_thisrow.user_defined_item1,
                this.user_defined_item2=_thisrow.user_defined_item2,
                this.user_defined_item3=_thisrow.user_defined_item3,
                this.user_defined_item4=_thisrow.user_defined_item4,
                this.user_defined_item5=_thisrow.user_defined_item5,
                this._show_edit_add()
              } 
            }
          },'编辑')
        }
      }
    ]
    this.getMsg()
    this.getOptionsmsg()
  },
  watch: {
    '$route': 'hide_edit_add'
  },
  methods: {
    ...mapActions({
      getaskTableMsg: 'getaskTableMsg',
      getaskSearchMsg: 'getaskSearchMsg',
      getOptionsMsg: 'getOptionsMsg',
      getExpiretaskMsg: 'getExpiretaskMsg',
      addTaskTablemsg:'addTaskTablemsg'
    }),
    handlePage (value) {
      this.pageindex = value
      console.log(value)
      this.getMsg()
    },
    handlePageSize (value) {
      this.pagesize = value
      console.log(value)
      this.getMsg()
    },
    getMsg () {
      var param = {
        'pageindex': this.pageindex,
        'pagesize': this.pagesize,
        'subproject': this.subproject,
        'classification': this.classification,
        'issue_name': this.issue_name,
        'asking_person': this.asking_person,
        'asking_party': this.asking_party,
        'responsible_party': this.responsible_party,
        'priority': this.priority,
        'risk_grade': this.risk_grade,
        'starttime': this.starttime,
        'endtime': this.endtime,
        'responsible_person_a': this.responsible_person_a,
        'responsible_person_b': this.responsible_person_b,
        'state': this.state
      }

      this.getaskTableMsg({ vue: this, param: param }).then(res => {
        console.log(this.$store.state.user.tablemsg)
        this.datat = this.$store.state.user.asktablemsg.issue
        this.totalPageNum = this.$store.state.user.asktablemsg.totalPageNum
        console.log('这是datat', this.datat)
      }).catch(error => {
        console.log('error')
      })
    },
    getOptionsmsg () {
      this.getOptionsMsg({ vue: this}).then(rs => {
        console.log('success')
        var optionsmsg = this.$store.state.user.getoptionsmsg
        this.msg = optionsmsg.project
        console.log('options', optionsmsg)
        // 成功后重新获取列表数据
        this.handlemsg(optionsmsg)
      }).catch(error => {
        console.log('error')
      })
    },
    handlemsg (msg) {
      var arr1 = []
      var _msg = msg.project
      for (var i = 0; i < _msg.length; i++) {
        arr1.push({
          value: _msg[i].name,
          label: _msg[i].name
        })
      }
      this.subproject_list = arr1
      var arr2 = []
      var _msg = msg.issue_classification
      for (var i = 0; i < _msg.length; i++) {
        arr2.push({
          value: _msg[i].name,
          label: _msg[i].name
        })
      }
      this.issue_classification_list = arr2
      var arr3 = []
      var _msg = msg.priority
      for (var i = 0; i < _msg.length; i++) {
        arr3.push({
          value: _msg[i].name,
          label: _msg[i].name
        })
      }
      this.priority_list = arr3
      var arr4 = []
      var _msg = msg.risk_grade
      for (var i = 0; i < _msg.length; i++) {
        arr4.push({
          value: _msg[i].name,
          label: _msg[i].name
        })
      }
      this.risk_grade_list = arr4
      var arr5 = []
      var _msg = msg.state
      for (var i = 0; i < _msg.length; i++) {
        arr5.push({
          value: _msg[i].name,
          label: _msg[i].name
        })
      }
      this.state_list = arr5
    },
    search () {
      var param = {
        'pageindex': this.pageindex,
        'pagesize': this.pagesize,
        'subproject': this.subproject,
        'classification': this.classification,
        'issue_name': this.issue_name,
        'asking_person': this.asking_person,
        'asking_party': this.asking_party,
        'responsible_party': this.responsible_party,
        'priority': this.priority,
        'risk_grade': this.risk_grade,
        'starttime': this.starttime,
        'endtime': this.endtime,
        'responsible_person_a': this.responsible_person_a,
        'responsible_person_b': this.responsible_person_b,
        'state': this.state
      }
      this.getaskSearchMsg({ vue: this, param: param }).then(rs => {
        console.log('success')
        this.datat = this.$store.state.user.asktablemsg.issue
        this.totalPageNum = this.$store.state.user.asktablemsg.totalPageNum
      }).catch(error => {
        console.log('error')
      })
    },
    expiretask () {
      var param = {
        'type': 'issue',
        'pageindex': this.pageindex,
        'pagesize': this.pagesize
      }
      console.log(param)
      this.getExpiretaskMsg({ vue: this, param: param }).then(rs => {
        this.datat = this.$store.state.user.tablemsg.issue
        console.log('这是datat', this.datat)
        this.totalPageNum = this.$store.state.user.tablemsg.totalPageNum
        console.log('success')
      }).catch(error => {
        console.log('error')
      })
    },
    getstarttime (value) {
      console.log(value)
      this.starttime = value
    },
    getendtime (value) {
      console.log(value)
      this.endtime = value
    },
    handleSuccess (res) {
      this.showbg = true
      this.showImportMsg = true
      console.log('handleSuccess')
      this.msginfoall = res.data.date[0].value
      this.allNum = res.data.date[1].value
      this.errNum = res.data.date[2].value
      this.successNum = res.data.date[3].value
      this.getMsg()
    },
    handleFormatError () {
      console.log('handleFormatError')
    },
    handleError () {
      console.log('handleError')
    },
    _hide () {
      this.showbg = false
      this.showImportMsg = false
    },
    hide_edit_add(){
      this.edit_add_bg = false
      this.show_edit_add = false
    },
    _show_edit_add(){
      this.edit_add_bg = true
      this.show_edit_add = true
    },
    add_task(){
      this.empty()
      this._show_edit_add()
    },
    empty(){
      this.subproject= ''
      this.classification= ''
      this.issue_name= ''
      this.issue_description=''
      this.asking_person= ''
      this.asking_party= ''
      this.responsible_party= ''
      this.priority= ''
      this.risk_grade= ''
      this.$refs.starttime.handleClear()// 计划开始时间清空
      this.$refs.endtime.handleClear() // 计划完成时间清空
      this.responsible_person_a= ''
      this.responsible_person_b= ''
      this.state= '',
      this.user_defined_item1=''
      this.user_defined_item2=''
      this.user_defined_item3=''
      this.user_defined_item4=''
      this.user_defined_item5=''
    },
    edit_add_cancel(){
      this.empty()
      this.hide_edit_add()
    },
    edit_add_submit(){
      var param ={
        'type':'issue',
        'id':this.id,
        'subproject':this.subproject,
        'classification':this.classification,
        'issue_name':this.issue_name,
        'issue_description':this.issue_description,
        'asking_person':this.asking_person,
        'asking_party':this.asking_party,
        'responsible_party':this.responsible_party,
        'priority':this.priority,
        'risk_grade':this.risk_grade,
        'starttime':this.starttime,
        'endtime':this.endtime,
        'responsible_person_a':this.responsible_person_a,
        'responsible_person_b':this.responsible_person_b,
        'state':this.state,
        'user_defined_item1':this.user_defined_item1,
        'user_defined_item2':this.user_defined_item2,
        'user_defined_item3':this.user_defined_item3,
        'user_defined_item4':this.user_defined_item4,
        'user_defined_item5':this.user_defined_item5
      }
       this.addTaskTablemsg({ vue: this, param: param }).then(rs => {
        this.empty()
        this.hide_edit_add()
          setTimeout(function(){
            this.getMsg()
          }.bind(this),1000)
        console.log('success')
      }).catch(error => {
        console.log('error')
      })
    }

  }
 
}
</script>

<style>
.all{
  position: relative;
}
.page{
  position: absolute;
  right: 2%;
  bottom: 1%;
}
.select_line{
  margin:10px 0;
  height:38px;
}
.select_name{
  display: inline-block;
  width: 8%;
  text-align: right;
  white-space:nowrap;
}
.select_data{
  display: inline-block;
  text-align: right;
}
.execl_btn{
  margin-left: 10px;
  float: right;
}
.search{
  float: right;
  margin-right: 43%;
  margin-top: 3px;
}
.exportE{
  color:#fff;
}
.exportE:hover{
  color:#fff;
}
.bgdiv{
  width: 100% ;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:1000;
  background: rgba(0,0,0,0.3);
}
.msgdiv{
  width: 96%;
  position: absolute;
  top: 7%;
  left: 2%;
  z-index: 10000;
  font-size: 14px;
  padding: 10px 20px;
  background: #fff;
  max-height: 500px;
  overflow: auto;
  white-space: nowrap;

}
.msg_title{
  text-align: center;
  position: absolute;
  top:3%;
  left: 2%;
  height:30px;
  line-height: 30px;
  font-size: 16px;
  background: #fff;
  width:96%;
  z-index: 100000;
}
.msg_title span{
  width: 30%;
  display: inline-block;
}
.list_info{
  height:25px;
  width:100%;
  white-space:nowrap;
}
._hide{
  cursor: pointer;
  color: red;
  font-style: normal;
  float: right;
  margin-right: 1%;
}
.edit_add_bg{
  width: 100% ;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:1000;
  background: #ffffff;
}
.edit_add_btn1{
  margin-left: 10px;
  margin-right: 20px;
  float: right;
}
.edit_add_btn2{
  float: right;
}
</style>
